<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>{{$header['title']}}</title>
    <meta name="description" content="{{$header['des']}}" /> 
    <meta name="keyword" content="{{$header['keyword']}}" /> 
    <link rel="stylesheet" type="text/css" href="/mcss/all.css">
    <link rel="stylesheet" type="text/css" href="/mcss/swiper-bundle.min.css">

    <link rel="stylesheet" type="text/css" href="/mcss/index.css">
    <!-- <link rel="stylesheet/less" type="text/css" href="/mcss/index.less" /> -->
    <script src="/mjs/swiper-3.4.2.min.js"></script>
    <!-- <script src="/mjs/less.js"></script> -->
</head>

<body>
    <div id="app">
        @include('mobile.header')
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @foreach($banner as $v)
                    <div class="swiper-slide"><img src="{{$v->imgurl}}" alt=""></div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="center">
            <div class="youshi fl">
                <div class="title fc flc">
                    <div class="p1">
                        OUR ADVANTAGES
                    </div>
                    <div class="p2">
                        我们的核心优势
                    </div>
                </div>
                <div class="main swiper-container2">
                    <div class="swiper-wrapper">
                        <div class="item swiper-slide flc">
                            <div class="img">
                                <img src="/img/index/y1.png" alt="">
                            </div>
                            <p class="p fc">专业的策划</p>
                            <p class="text fc">专业的网站策划不仅是制作网站成功的 重要条件之一，也是网站形成的先行条件
                            </p>
                        </div>
                        <div class="item swiper-slide flc">
                            <div class="img">
                                <img src="/img/index/y2.png" alt="">
                            </div>
                            <p class="p fc">专业的服务</p>
                            <p class="text fc"> 专业的服务 <br> 关注客户、不断创新，100%处理
                            </p>
                        </div>
                        <div class="item swiper-slide flc">
                            <div class="img">
                                <img src="/img/index/y3.png" alt="">
                            </div>
                            <p class="p fc">专业的团队</p>
                            <p class="text fc">设计、开发等专业的IT人士
                            </p>
                        </div>
                        <div class="item swiper-slide flc">
                            <div class="img">
                                <img src="/img/index/y4.png" alt="">
                            </div>
                            <p class="p fc">专业的产品</p>
                            <p class="text fc">为企业提升管理效率，针对不同行业为客户推出行业信息化应用解决方案，提供强 大产品驱动力
                            </p>
                        </div>
                        <div class="item swiper-slide flc">
                            <div class="img">
                                <img src="/img/index/y5.png" alt="">
                            </div>
                            <p class="p fc">诚信经营</p>
                            <p class="text fc">专业的服务 <br> 关注客户、不断创新，100%处理
                            </p>
                        </div>
                        <div class="item swiper-slide flc">
                            <div class="img">
                                <img src="/img/index/y6.png" alt="">
                            </div>
                            <p class="p fc">丰富的经验</p>
                            <p class="text fc">竭力提供热情贴心的售后服务
                            </p>
                        </div>
                    </div>
                    <div class="swiper-pagination2"></div>
                </div>
            </div>
            <div class="fuwu fl">
                <div class="title fc flc">
                    <div class="p1">
                        INDUSTRY SERVICES
                    </div>
                    <div class="p2">
                        行业服务
                    </div>
                </div>
                <div class="main swiper-container3 fl bgc">
                    <div class="swiper-wrapper">
                        <div class="right swiper-slide">
                            <p class="smtitle">
                                外包测试
                            </p>
                            <p class="content">
                                企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片， 对企业的形象是一个良好的宣传，通过网络直接帮助企业实现产品的销售， 是企业开展网络营销的重要条件。
                            </p>
                            <p class="action">
                                <img src="/img/index/chakan.png" alt="">
                            </p>
                        </div>
                        <div class="right swiper-slide">
                            <p class="smtitle">
                                开发外包
                            </p>
                            <p class="content">
                                企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片， 对企业的形象是一个良好的宣传，通过网络直接帮助企业实现产品的销售， 是企业开展网络营销的重要条件。
                            </p>
                            <p class="action">
                                <img src="/img/index/chakan.png" alt="">
                            </p>
                        </div>
                        <div class="right swiper-slide">
                            <p class="smtitle">
                                IT咨询
                            </p>
                            <p class="content">
                                企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片， 对企业的形象是一个良好的宣传，通过网络直接帮助企业实现产品的销售， 是企业开展网络营销的重要条件。
                            </p>
                            <p class="action">
                                <img src="/img/index/chakan.png" alt="">
                            </p>
                        </div>
                        <div class="right swiper-slide">
                            <p class="smtitle">
                                小程序/APP
                            </p>
                            <p class="content">
                                企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片， 对企业的形象是一个良好的宣传，通过网络直接帮助企业实现产品的销售， 是企业开展网络营销的重要条件。
                            </p>
                            <p class="action">
                                <img src="/img/index/chakan.png" alt="">
                            </p>
                        </div>
                    </div>
                    <div class="swiper-pagination3"></div>
                </div>
            </div>
            <div class="anli fl">
                <div class="title fc flc">
                    <div class="p1">
                        CASE CENTER
                    </div>
                    <div class="p2">
                        案例中心
                    </div>
                </div>
                <div class="main fl">
                @foreach($case as $v)
                @if($loop->iteration == 1)
                    <div class="case">
                        <div class="img">
                            <img src="{{$v->thumb}}" alt="">
                        </div>
                        <p class="p fc">{{$v->title}}</p>
                        <!-- <p class="text fc">案例简介</p> -->
                    </div>
                @endif
                @endforeach
                    <!-- <div class="case">
                        <div class="img">
                            <img src="/img/index/case2.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="/img/index/case3.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="/img/index/case1.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="/img/index/case5.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="/img/index/case1.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div> -->
                </div>
            </div>
            <div class="contact fl">
                <div class="title fc flc">
                    <div class="p1">
                        CONTACT US
                    </div>
                    <div class="p2">
                        联系我们
                    </div>
                </div>
                <div class="main fl">
                    <div class="top">
                        <div class="item">
                            <div class="img">
                                <img src="/img/index/u1.png" alt="">
                            </div>
                            <div>
                                <p>联系电话</p>
                                <p>0000-00000</p>
                            </div>
                        </div>
                        <div class="item border2">
                            <div class="img">
                                <img src="/img/index/u2.png" alt="">
                            </div>
                            <div>
                                <p>联系邮箱</p>
                                <p>0000-00000</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img">
                                <img src="/img/index/u3.png" alt="">
                            </div>
                            <div>
                                <p>联系地址</p>
                                <p style="font-size: 20px;">沧州市运河区华商大厦1008</p>
                            </div>
                        </div>
                    </div>
                    <div class="form fl">

                        <input type="text" id="username" placeholder="您的姓名">
                        <input type="text" id="phone" placeholder="您的电话">
                        <input type="text" id="email" placeholder="联系邮箱">

                        <input type="text" id="content" placeholder="留言内容">

                        <button onclick="postMsg()">提交留言</button>

                    </div>
                </div>
            </div>
        </div>
        @include('mobile.footer')
    </div>
    <script src="/mjs/jquery.js"></script>
    <script src="/mjs/nav.js"></script>
    <script>
        $(document).ready(() => {
            // 轮播图
            var swiper = new Swiper('.swiper-container', {
                autoplay: 3000,
                autoplayDisableOnInteraction: false,
                pagination: '.swiper-pagination',
                paginationClickable: true,
                // observer: true,
                // observeParents: true,
                loop: true
            });

            // 轮播--核心优势
            var swiper = new Swiper('.swiper-container2', {
                // autoplay: 3000,
                autoplayDisableOnInteraction: false,
                pagination: '.swiper-pagination2',
                paginationClickable: true,
                // observer: true,
                // observeParents: true,
                loop: true
            });

            // 轮播--行业服务
            var swiper = new Swiper('.swiper-container3', {
                // autoplay: 3000,
                autoplayDisableOnInteraction: false,
                pagination: '.swiper-pagination3',
                paginationClickable: true,
                // observer: true,
                // observeParents: true,
                loop: true
            });


        })

        // function goto(url) {
        //     location.href = url;
        // }
        // 提交留言
        function postMsg() {
            let sendData = {
                username: $('#username').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                content: $('#content').val()
            }
            console.log(sendData);

            $.ajax({
                url: "",
                type: "post",
                data: sendData,
                success(res) {
                    alert("提交成功")
                    console.log(res);

                    $('#username').val("");
                    $('#phone').val("");
                    $('#email').val("");
                    $('#content').val("");
                }
            })
        }
        // 显示导航栏
        // function showNav() {
        //     $(".headernav").stop().slideToggle(500).css({
        //         display: "flex"
        //     });

        //     $(".n1").toggleClass("donghua")
        //     setTimeout(() => {
        //         $(".n2").toggleClass("donghua")
        //     }, 300);
        // }
        // 隐藏导航栏
        // function hideNav() {
        //     $(".headernav").stop().slideToggle(500)
        //     $(".n2").toggleClass("donghua")
        //     setTimeout(() => {
        //         $(".n1").toggleClass("donghua")
        //     }, 300);
        // }

        // 响应式跳转
        changeMargin();
        window.onresize = function() {
            changeMargin();
        };

        function changeMargin() {
            if (a) {
                var docWidth = document.body.clientWidth;
                if (docWidth >= 1360) {
                    location.href = "/";
                    a = false;
                }
            }

        }
    </script>
</body>

</html>